<template>
  <div class="box">
    <div class="title">
      <van-icon class="icon" name="arrow-left" @click="returnFn" />
      {{ info.data.title }}
    </div>
    <div class="content">
      <div v-html="info.data.content"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getProtocoDetail } from "@/api/http.js";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const route = useRoute();
    const returnFn = () => {
      router.go(-1);
    };
    const info = reactive({
      data: {},
    });
    const getInfo = async () => {
      const { data } = await getProtocoDetail({ id: route.query.id });
      info.data = data;
      console.log(data);
    };

    onMounted(() => {
      getInfo();
    });

    return {
      returnFn,
      proxy,
      info,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: 100vh;
  background-color: var(--backColorTwo);
  color: var(--textColor);
  .title {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 60px;
    position: relative;
    padding: 0 4%;
    background-color: #212121;

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      font-size: 1.5rem;
      transform: translateY(-50%);
    }
  }
  .content {
    margin-top: 10px;
    padding: 0 4%;
  }
}
</style>
